<template>
	<view class="j-search" :class="searchClass" :style="searchStyle">
		<!-- 搜索框容器 -->
		<view class="search-container" :style="containerStyle">
			<!-- 搜索图标 -->
			<view class="search-icon" v-if="showSearchIcon">
				<text class="iconfont icon-search" :style="{ color: iconColor }"></text>
			</view>
			
			<!-- 输入框 -->
			<input
				class="search-input"
				:class="inputClass"
				:style="inputStyle"
				:type="inputType"
				:placeholder="placeholder"
				:placeholder-style="placeholderStyle"
				:value="searchValue"
				:maxlength="maxlength"
				:disabled="disabled"
				:focus="focused"
				:confirm-type="confirmType"
				@input="handleInput"
				@focus="handleFocus"
				@blur="handleBlur"
				@confirm="handleConfirm"
				@clear="handleClear"
			/>
			
			<!-- 清除按钮 -->
			<view 
				class="clear-btn" 
				v-if="showClear && searchValue && !disabled"
				@click="handleClear"
			>
				<text class="iconfont icon-close" :style="{ color: iconColor }"></text>
			</view>
			
			<!-- 语音搜索按钮 -->
			<view 
				class="voice-btn" 
				v-if="showVoice && !disabled"
				@click="handleVoice"
			>
				<text class="iconfont icon-voice" :style="{ color: iconColor }"></text>
			</view>
			
			<!-- 扫码搜索按钮 -->
			<view 
				class="scan-btn" 
				v-if="showScan && !disabled"
				@click="handleScan"
			>
				<text class="iconfont icon-scan" :style="{ color: iconColor }"></text>
			</view>
		</view>
		
		<!-- 搜索建议/历史记录 -->
		<view class="search-suggestions" v-if="showSuggestions && (suggestions.length > 0 || history.length > 0)">
			<!-- 搜索历史 -->
			<view class="search-history" v-if="showHistory && history.length > 0">
				<view class="history-header">
					<text class="history-title">搜索历史</text>
					<text class="clear-history" @click="clearHistory">清空</text>
				</view>
				<view class="history-tags">
					<view 
						class="history-tag" 
						v-for="(item, index) in history" 
						:key="index"
						@click="selectHistory(item)"
					>
						{{ item }}
					</view>
				</view>
			</view>
			
			<!-- 搜索建议 -->
			<view class="search-suggest" v-if="suggestions.length > 0">
				<view class="suggest-header">
					<text class="suggest-title">搜索建议</text>
				</view>
				<view class="suggest-list">
					<view 
						class="suggest-item" 
						v-for="(item, index) in suggestions" 
						:key="index"
						@click="selectSuggestion(item)"
					>
						<text class="suggest-text">{{ item }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 热门搜索 -->
		<view class="hot-search" v-if="showHotSearch && hotSearch.length > 0 && !searchValue">
			<view class="hot-header">
				<text class="hot-title">热门搜索</text>
			</view>
			<view class="hot-tags">
				<view 
					class="hot-tag" 
					v-for="(item, index) in hotSearch" 
					:key="index"
					:class="{ 'hot-tag-active': index < 3 }"
					@click="selectHotSearch(item)"
				>
					{{ item }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
	name: 'JSearch',
	props: {
		// 基础配置
		value: {
			type: String,
			default: ''
		},
		placeholder: {
			type: String,
			default: '请输入搜索内容'
		},
		disabled: {
			type: Boolean,
			default: false
		},
		
		// 样式配置
		backgroundColor: {
			type: String,
			default: '#f5f5f5'
		},
		textColor: {
			type: String,
			default: '#333333'
		},
		iconColor: {
			type: String,
			default: '#999999'
		},
		placeholderColor: {
			type: String,
			default: '#999999'
		},
		
		// 布局配置
		height: {
			type: [String, Number],
			default: 40
		},
		radius: {
			type: [String, Number],
			default: 20
		},
		padding: {
			type: [String, Number],
			default: 12
		},
		
		// 功能配置
		showSearchIcon: {
			type: Boolean,
			default: true
		},
		showClear: {
			type: Boolean,
			default: true
		},
		showVoice: {
			type: Boolean,
			default: false
		},
		showScan: {
			type: Boolean,
			default: false
		},
		showSuggestions: {
			type: Boolean,
			default: true
		},
		showHistory: {
			type: Boolean,
			default: true
		},
		showHotSearch: {
			type: Boolean,
			default: true
		},
		
		// 搜索配置
		maxlength: {
			type: Number,
			default: 50
		},
		confirmType: {
			type: String,
			default: 'search'
		},
		inputType: {
			type: String,
			default: 'text'
		},
		
		// 数据配置
		suggestions: {
			type: Array,
			default: () => []
		},
		hotSearch: {
			type: Array,
			default: () => []
		},
		history: {
			type: Array,
			default: () => []
		},
		
		// 高级配置
		debounceTime: {
			type: Number,
			default: 300
		},
		minSearchLength: {
			type: Number,
			default: 1
		},
		animation: {
			type: Boolean,
			default: true
		}
	},
		data() {
		return {
			searchValue: '',
			focused: false,
			searchTimer: null
		}
	},
	computed: {
		// 搜索框样式类
		searchClass() {
			return {
				'j-search--focused': this.focused,
				'j-search--disabled': this.disabled,
				'j-search--animation': this.animation
			}
		},
		
		// 搜索框整体样式
		searchStyle() {
			return {
				backgroundColor: this.backgroundColor,
				borderRadius: typeof this.radius === 'number' ? this.radius + 'px' : this.radius
			}
		},
		
		// 容器样式
		containerStyle() {
			return {
				height: typeof this.height === 'number' ? this.height + 'px' : this.height,
				padding: typeof this.padding === 'number' ? this.padding + 'px' : this.padding
			}
		},
		
		// 输入框样式类
		inputClass() {
			return {
				'search-input--focused': this.focused,
				'search-input--disabled': this.disabled
			}
		},
		
		// 输入框样式
		inputStyle() {
			return {
				color: this.textColor,
				fontSize: '14px'
			}
		},
		
		// 占位符样式
		placeholderStyle() {
			return `color: ${this.placeholderColor}`
		}
	},
	watch: {
		value: {
			handler(newVal) {
				this.searchValue = newVal
			},
			immediate: true
		},
		searchValue(newVal) {
			this.$emit('input', newVal)
			this.handleSearchChange(newVal)
		}
	},
	methods: {
		// 输入处理
		handleInput(e) {
			const value = e.detail.value
			this.searchValue = value
			this.$emit('input', value)
		},
		
		// 搜索变化处理（防抖）
		handleSearchChange(value) {
			if (this.searchTimer) {
				clearTimeout(this.searchTimer)
			}
			
			this.searchTimer = setTimeout(() => {
				if (value.length >= this.minSearchLength) {
					this.$emit('search', value)
				}
			}, this.debounceTime)
		},
		
		// 聚焦处理
		handleFocus(e) {
			this.focused = true
			this.$emit('focus', e)
		},
		
		// 失焦处理
		handleBlur(e) {
			this.focused = false
			this.$emit('blur', e)
		},
		
		// 确认搜索
		handleConfirm(e) {
			const value = e.detail.value
			this.$emit('confirm', value)
			this.addToHistory(value)
		},
		
		// 清除内容
		handleClear() {
			this.searchValue = ''
			this.$emit('input', '')
			this.$emit('clear')
		},
		
		// 语音搜索
		handleVoice() {
			this.$emit('voice')
		},
		
		// 扫码搜索
		handleScan() {
			this.$emit('scan')
		},
		
		// 选择历史记录
		selectHistory(item) {
			this.searchValue = item
			this.$emit('input', item)
			this.$emit('select-history', item)
		},
		
		// 选择建议
		selectSuggestion(item) {
			this.searchValue = item
			this.$emit('input', item)
			this.$emit('select-suggestion', item)
		},
		
		// 选择热门搜索
		selectHotSearch(item) {
			this.searchValue = item
			this.$emit('input', item)
			this.$emit('select-hot', item)
		},
		
		// 添加到历史记录
		addToHistory(value) {
			if (value && !this.history.includes(value)) {
				const newHistory = [value, ...this.history].slice(0, 10) // 最多保存10条
				this.$emit('update:history', newHistory)
			}
		},
		
		// 清空历史记录
		clearHistory() {
			this.$emit('update:history', [])
			this.$emit('clear-history')
		}
		}
	}
</script>

<style lang="scss" scoped>
.j-search {
	position: relative;
	width: 100%;
	transition: all 0.3s ease;
	
	&--focused {
		.search-container {
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		}
	}
	
	&--disabled {
		opacity: 0.6;
		pointer-events: none;
	}
	
	&--animation {
		.search-container {
			transition: all 0.3s ease;
		}
	}
}

.search-container {
	display: flex;
	align-items: center;
	background-color: #f5f5f5;
	border-radius: 20px;
	padding: 12px 16px;
	position: relative;
	overflow: hidden;
}

.search-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
	flex-shrink: 0;
}

.search-input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-size: 14px;
	line-height: 1.4;
	
	&--focused {
		// 聚焦时的样式可以在这里添加
	}
	
	&--disabled {
		color: #ccc;
	}
}

.clear-btn,
.voice-btn,
.scan-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-left: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
	
	&:active {
		transform: scale(0.9);
	}
}

.clear-btn {
	&:hover {
		background-color: rgba(0, 0, 0, 0.1);
		border-radius: 50%;
	}
}

.voice-btn,
.scan-btn {
	&:hover {
		background-color: rgba(0, 0, 0, 0.1);
		border-radius: 50%;
	}
}

.search-suggestions {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	z-index: 999;
	max-height: 300px;
	overflow-y: auto;
}

.search-history {
	padding: 12px 16px;
	border-bottom: 1px solid #f0f0f0;
}

.history-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.history-title,
.suggest-title,
.hot-title {
	font-size: 12px;
	color: #666;
	font-weight: 500;
}

.clear-history {
	font-size: 12px;
	color: #999;
	cursor: pointer;
	
	&:hover {
		color: #666;
	}
}

.history-tags,
.hot-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.history-tag,
.hot-tag {
	padding: 4px 12px;
	background: #f5f5f5;
	border-radius: 12px;
	font-size: 12px;
	color: #666;
	cursor: pointer;
	transition: all 0.3s ease;
	
	&:hover {
		background: #e0e0e0;
	}
	
	&:active {
		transform: scale(0.95);
	}
}

.hot-tag {
	&.hot-tag-active {
		background: #ff6b6b;
		color: #fff;
	}
}

.search-suggest {
	padding: 12px 16px;
}

.suggest-header {
	margin-bottom: 8px;
}

.suggest-list {
	.suggest-item {
		padding: 8px 0;
		border-bottom: 1px solid #f0f0f0;
		cursor: pointer;
		transition: background-color 0.3s ease;
		
		&:hover {
			background-color: #f5f5f5;
		}
		
		&:last-child {
			border-bottom: none;
		}
	}
}

.suggest-text {
	font-size: 14px;
	color: #333;
}

.hot-search {
	padding: 12px 16px;
	background: #fafafa;
	border-radius: 8px;
	margin-top: 8px;
}

.hot-header {
	margin-bottom: 8px;
}

/* 响应式设计 */
@media screen and (max-width: 375px) {
	.search-container {
		padding: 10px 12px;
	}
	
	.search-input {
		font-size: 13px;
	}
}

@media screen and (min-width: 414px) {
	.search-container {
		padding: 14px 18px;
	}
	
	.search-input {
		font-size: 15px;
	}
}

/* 平台特定样式 */
/* #ifdef H5 */
.j-search {
	.search-container {
		&:focus-within {
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		}
	}
}
/* #endif */

/* #ifdef MP */
.j-search {
	.search-container {
		padding: 10px 14px;
	}
}
/* #endif */

/* #ifdef APP-PLUS */
.j-search {
	.search-container {
		padding: 12px 16px;
	}
}
/* #endif */
</style>